<!DOCTYPE html>
<html>
	<head>
		<title>Cool new CSS3 loading styles - No Javascript!</title>
		<style>body{background: url(white_wall.png);background-repeat: repeat;}#logo{padding:0px 0 60px 0p;margin-bottom:50px}#logo a{display:block;width:250px;height:70px;background:url(taxi.jpg) no-repeat;float:left}.image{margin-left:200px;width:150px;height:150px;overflow:hidden;cursor:pointer;display:inline-block;background:#6d6d6d;padding:0}.loading4{width:100px;height:100px;margin:40px auto}.bar{background-color:#333;border:1px solid #333;float:left;margin-right:8px;margin-top:16px;width:12px;height:50px;animation:loadingbar 1s infinite linear;-webkit-animation:loadingbar 1s infinite linear}.loading4 .bar:nth-child(2) {animation-delay:.1s}.loading4 .bar:nth-child(3) {animation-delay:.2s}.loading4 .bar:nth-child(4) {animation-delay:.3s}.loading4 .bar:nth-child(2) {-webkit-animation-delay:.1s}.loading4 .bar:nth-child(3) {-webkit-animation-delay:.2s}.loading4 .bar:nth-child(4) {-webkit-animation-delay:.3s}@keyframes loadingbar {
     0% { }
    10% { margin-top:5px; height:22px; border-color:#fff; background-color:#fff; }
    20% { margin-top:0px; height:32px; border-color:#fff; background-color:#fff; }
    30% { margin-top:1px; height:30px; border-color:#fff; background-color:#fff; }
    40% { margin-top:3px; height:26px; }
    50% { margin-top:5px; height:22px; }
    60% { margin-top:6px; height:18px; }
    70% { }
    /* Missing frames will cause the extra delay */
    100% { }
}@-webkit-keyframes loadingbar {
     0% { }
    10% { margin-top:5px; height:32px; border-color:#fff; background-color:#fff; }
    20% { margin-top:0px; height:32px; border-color:#fff; background-color:#fff; }
    30% { margin-top:10px; height:30px; border-color:#fff; background-color:#fff; }
    40% { margin-top:3px; height:26px; }
    50% { margin-top:5px; height:22px; }
    60% { margin-top:6px; height:18px; }
    70% { }
    /* Missing frames will cause the extra delay */
    100% { }
}</style>
	</head>
	<body class="tg-body">
		<div id="logo"><br/><img width="480" height="300" alt="taxi" src="taxi.jpg" style="margin-right: auto; margin-left: auto; display: block;"></img></div>
        <div id="status" style="text-align: center; font-size: 40px;">Server was running</div>
		<div class="loading4">
			<div class="bar"></div> 
			<div class="bar"></div> 
			<div class="bar"></div> 
			<div class="bar"></div> 
		</div>	
	<script>//<![CDATA[
(function(){var d=encodeURIComponent,f=window,g=document,h="documentElement",k="length",l="prototype",m="body",p="&",s="&ci=",t=",",u="?",v="Content-Type",w="Microsoft.XMLHTTP",x="Msxml2.XMLHTTP",y="POST",z="application/x-www-form-urlencoded",A="img",B="input",C="load",D="oh=",E="on",F="pagespeed_url_hash",G="url=";f.pagespeed=f.pagespeed||{};var H=f.pagespeed,I=function(a,b,c){this.c=a;this.e=b;this.d=c;this.b=this.f();this.a={}};I[l].f=function(){return{height:f.innerHeight||g[h].clientHeight||g[m].clientHeight,width:f.innerWidth||g[h].clientWidth||g[m].clientWidth}};I[l].g=function(a){a=a.getBoundingClientRect();return{top:a.top+(void 0!==f.pageYOffset?f.pageYOffset:(g[h]||g[m].parentNode||g[m]).scrollTop),left:a.left+(void 0!==f.pageXOffset?f.pageXOffset:(g[h]||g[m].parentNode||g[m]).scrollLeft)}};I[l].h=function(a){if(0>=a.offsetWidth&&0>=a.offsetHeight)return!1;a=this.g(a);var b=a.top.toString()+t+a.left.toString();if(this.a.hasOwnProperty(b))return!1;this.a[b]=!0;return a.top<=this.b.height&&a.left<=this.b.width};I[l].i=function(a){var b;if(f.XMLHttpRequest)b=new XMLHttpRequest;else if(f.ActiveXObject)try{b=new ActiveXObject(x)}catch(c){try{b=new ActiveXObject(w)}catch(e){}}if(!b)return!1;b.open(y,this.c+(-1==this.c.indexOf(u)?u:p)+G+d(this.e));b.setRequestHeader(v,z);b.send(a);return!0};I[l].k=function(){for(var a=[A,B],b=[],c={},e=0;e<a[k];++e)for(var q=g.getElementsByTagName(a[e]),n=0;n<q[k];++n){var r=q[n].getAttribute(F);r&&(q[n].getBoundingClientRect&&this.h(q[n]))&&!(r in c)&&(b.push(r),c[r]=!0)}if(0!=b[k]){a=D+this.d;a+=s+d(b[0]);for(e=1;e<b[k];++e){c=t+d(b[e]);if(131072<a[k]+c[k])break;a+=c}H.criticalImagesBeaconData=a;this.i(a)}};H.j=function(a,b,c){if(a.addEventListener)a.addEventListener(b,c,!1);else if(a.attachEvent)a.attachEvent(E+b,c);else{var e=a[E+b];a[E+b]=function(){c.call(this);e&&e.call(this)}}};H.l=function(a,b,c){var e=new I(a,b,c);H.j(f,C,function(){f.setTimeout(function(){e.k()},0)})};H.criticalImagesBeaconInit=H.l;})();pagespeed.criticalImagesBeaconInit('/mod_pagespeed_beacon','http://demo.techglimpse.com/cool-loading-styles-css3/downloads/5.html','4Wv4b7xhNt');
//]]></script></body>
</html>

